<template>
    <div>
        <!-- <article class="wrapper" v-bind:class="{greyBgColor:(curActive !== 'all' || loading === true)}"> -->


        <!-- 头部 -->
        <header id='header'>
            <div id='header-box'>
                <a class='search' id='search-link'>
                    <svg class='expand' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
                        <path
                            d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/>
                        <path d='M0 0h24v24H0z' fill='none'/>
                    </svg>
                    <svg class='collapse' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
                        <path
                            d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/>
                        <path d='M0 0h24v24H0z' fill='none'/>
                    </svg>
                </a>

                <div id='search'>
                    <input type='text' id='search-input-pike-blog' placeholder='输入关键词'/>
                    <ul id='search-results'></ul>
                </div>


                <a href='#' class='language'>EN</a>
                <div class="wrapper">
                    <a class="starbucks" id="website-header-logo" href='/'><img src="/static/favicons/favicon.png"/></a>
                    <div class="line"></div>
                    <a class='home' id="blog-home-header-logo" href='#'>

                        <svg viewBox="0 0 419 119" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink">
                            <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
                            <title>Artboard</title>
                            <desc>Created with Sketch.</desc>
                            <defs></defs>
                            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g id="Artboard">
                                    <g id="pike-en-copy" fill-rule="nonzero" fill="#231F20">
                                        <g id="Group" transform="translate(0.000000, 49.000000)">
                                            <path
                                                d="M8.88757542,14.6190029 L0,14.6190029 L0,8.4970088 C4.98962011,5.94252199 9.6133743,3.20058651 13.3214749,0 L19.0368939,0 L19.0368939,66.8892669 L8.88757542,66.8892669 L8.88757542,14.6190029 Z"
                                                id="Shape"></path>
                                            <path
                                                d="M57.1480335,49.1574194 L57.1480335,52.537478 C57.1480335,56.838827 58.5976536,58.8409384 61.9497765,58.8409384 C65.3018994,58.8409384 67.2024246,56.8468035 67.2024246,52.537478 L67.2024246,37.1008798 C64.3031844,40.0242815 62.4956089,41.4879765 57.9568939,41.4879765 C51.4306369,41.4879765 46,37.6532551 46,27.9597654 L46,20.1068622 C46,6.20774194 50.7068156,0 61.9477989,0 C73.1887821,0 77.8955978,5.66733138 77.8955978,18.0947801 L77.8955978,49.7078006 C77.8955978,62.1352493 73.1788939,67.8025806 61.9477989,67.8025806 C53.0602235,67.9820528 47.3546927,61.584868 47.3546927,53.1835777 L47.3546927,49.1574194 L57.1460559,49.1574194 L57.1480335,49.1574194 Z M67.2024246,15.2571261 C67.2024246,10.9557771 65.2999218,8.94369501 61.9497765,8.94369501 C58.5996313,8.94369501 56.6971285,10.9557771 56.6971285,15.2571261 L56.6971285,26.2129032 C56.6971285,30.5142522 58.5996313,32.5163636 61.4039441,32.5163636 C63.3993966,32.5163636 65.8477318,30.5980059 67.2044022,29.5072141 L67.2044022,15.2651026 L67.2024246,15.2571261 Z"
                                                id="Shape"></path>
                                            <path
                                                d="M107.887575,14.6190029 L99,14.6190029 L99,8.4970088 C103.98962,5.94252199 108.613374,3.20058651 112.321475,0 L118.036894,0 L118.036894,66.8892669 L107.887575,66.8892669 L107.887575,14.6190029 Z"
                                                id="Shape"></path>
                                            <path
                                                d="M145,66.8892669 L145,58.0233431 C158.962235,37.4618182 166.570268,26.135132 166.570268,16.4436364 C166.570268,11.2409384 164.592615,8.95366569 161.495609,8.95366569 C157.87057,8.95366569 156.062994,11.7913196 156.062994,15.8075073 L156.062994,20.2883284 L145.367844,20.2883284 L145.367844,17.1834604 C145.367844,7.48997067 151.534168,0 162.041441,0 C171.286972,0 177.269374,6.94956012 177.269374,14.6190029 C177.269374,25.0323754 174.002291,32.713783 156.424905,57.5666862 L176.266704,57.5666862 L176.266704,66.8892669 L145,66.8892669 Z"
                                                id="Shape"></path>
                                        </g>
                                        <g id="Group" transform="translate(50.000000, 0.000000)">
                                            <path
                                                d="M11.9233484,7.12195122 C11.1181455,6.0097561 9.68821636,5.48487805 8.23250483,5.48487805 C6.49120412,5.48487805 4.76378622,6.24 4.76378622,8.15609756 C4.76378622,12.3239024 14.7951062,9.94536585 14.7951062,17.3268293 C14.7951062,21.8009756 11.2093754,23.9746341 7.06039923,23.9746341 C4.43456536,23.9746341 1.86227946,23.182439 0.134861558,21.1492683 L2.96695428,18.4507317 C3.9025781,19.8279053 5.47989732,20.6492942 7.16352865,20.6360976 C8.89094656,20.6360976 10.8662717,19.6897561 10.8662717,17.7853659 C10.8662717,13.2331707 0.834951706,15.8341463 0.834951706,8.4195122 C0.834951706,4.12682927 4.72015454,2.14243902 8.63113973,2.14243902 C10.8266066,2.14243902 13.0359562,2.75707317 14.686027,4.27707317 L11.9233484,7.12195122 Z"
                                                id="Shape"></path>
                                            <polygon id="Shape"
                                                     points="38.0012106 6.0097561 31.5159562 6.0097561 31.5159562 2.66146341 48.2268899 2.66146341 48.2268899 6.0097561 41.7555184 6.0097561 41.7555184 23.4478049 38.0012106 23.4478049"></polygon>
                                            <path
                                                d="M69.7868899,2.66146341 L73.0473664,2.66146341 L82.1445718,23.4497561 L77.8567675,23.4497561 L75.8735093,18.6946341 L66.7187894,18.6946341 L64.8089118,23.4497561 L60.5984546,23.4497561 L69.7868899,2.66146341 Z M74.5685254,15.5239024 L71.3199485,7.07121951 L68.005924,15.5219512 L74.5685254,15.5219512 L74.5685254,15.5239024 Z"
                                                id="Shape"></path>
                                            <path
                                                d="M99.4524662,2.66146341 L106.790522,2.66146341 C110.858184,2.66146341 114.677939,3.95317073 114.677939,8.61853659 C114.677939,11.6234146 112.910856,13.822439 109.779292,14.257561 L115.393896,23.4497561 L110.862151,23.4497561 L105.963503,14.6439024 L103.22264,14.6439024 L103.22264,23.4536585 L99.4544495,23.4536585 L99.4544495,2.66146341 L99.4524662,2.66146341 Z M106.143979,11.4712195 C108.262099,11.4712195 110.745138,11.2917073 110.745138,8.59512195 C110.745138,6.12682927 108.418777,5.83414634 106.469234,5.83414634 L103.22264,5.83414634 L103.22264,11.4731707 L106.145963,11.4731707 L106.143979,11.4712195 Z"
                                                id="Shape"></path>
                                            <path
                                                d="M133.201571,2.66146341 L141.430109,2.66146341 C144.627122,2.66146341 147.915364,4.10536585 147.915364,7.89073171 C147.915364,10.2439024 146.419987,11.7931707 144.238403,12.4429268 L144.238403,12.497561 C146.865827,12.7230119 148.865623,14.914041 148.811797,17.5082927 C148.811797,22.035122 144.809581,23.44 140.807366,23.44 L133.191655,23.44 L133.191655,2.66146341 L133.201571,2.66146341 Z M136.969762,11.1258537 L140.400798,11.1258537 C142.90962,11.1258537 144.15709,10.0643902 144.15709,8.50536585 C144.15709,6.71609756 142.90962,5.83414634 140.077527,5.83414634 L136.971745,5.83414634 L136.971745,11.1317073 L136.969762,11.1258537 Z M136.969762,20.2790244 L140.426581,20.2790244 C142.376124,20.2790244 145.053522,19.9590244 145.053522,17.2234146 C145.053522,15.0497561 143.623593,14.2965854 140.583258,14.2965854 L136.969762,14.2965854 L136.969762,20.2790244 Z"
                                                id="Shape"></path>
                                            <path
                                                d="M184.427147,15.8146341 C184.427147,20.8390244 180.750187,23.9843902 175.915003,23.9843902 C171.07982,23.9843902 167.410792,20.8409756 167.410792,15.8146341 L167.410792,2.66146341 L171.178983,2.66146341 L171.178983,15.7014634 C171.178983,17.76 172.30944,20.4565854 175.922936,20.4565854 C179.536433,20.4565854 180.66689,17.7580488 180.66689,15.7014634 L180.66689,2.66146341 L184.43508,2.66146341 L184.43508,15.8146341 L184.427147,15.8146341 Z"
                                                id="Shape"></path>
                                            <path
                                                d="M218.511423,7.53170732 C216.952582,5.92 215.522653,5.48682927 214.055042,5.48682927 C209.691874,5.48682927 206.80425,8.77268293 206.80425,12.915122 C206.80425,17.3385366 209.70179,20.6380488 214.055042,20.6380488 C215.756677,20.6380488 217.406748,19.8712195 218.814862,18.1014634 L221.920644,20.275122 C220.010766,22.8585366 217.139008,23.982439 214.033226,23.982439 C207.522189,23.982439 202.871449,19.635122 202.871449,13.1414634 C202.871449,6.48 207.524173,2.13268293 214.033226,2.13268293 C216.904984,2.13268293 219.348358,3.04 221.440695,5.41853659 L218.511423,7.53170732 Z"
                                                id="Shape"></path>
                                            <polygon id="Shape"
                                                     points="239.381249 2.66146341 243.14944 2.66146341 243.14944 11.4712195 243.3319 11.4712195 252.078068 2.66146341 257.145293 2.66146341 247.268667 12.2634146 257.807701 23.4497561 252.518352 23.4497561 243.357682 13.235122 243.159356 13.235122 243.159356 23.4497561 239.391165 23.4497561 239.391165 2.66146341"></polygon>
                                            <path
                                                d="M285.136999,7.12195122 C284.331797,6.0097561 282.901867,5.48487805 281.446156,5.48487805 C279.704855,5.48487805 277.977437,6.24 277.977437,8.15609756 C277.977437,12.3239024 288.008757,9.94536585 288.008757,17.3268293 C288.008757,21.8009756 284.423026,23.9746341 280.27405,23.9746341 C277.648216,23.9746341 275.07593,23.182439 273.348513,21.1492683 L276.180605,18.4507317 C277.116633,19.8199696 278.688113,20.6362486 280.36528,20.6243902 C282.092698,20.6243902 284.068023,19.6780488 284.068023,17.7736585 C284.068023,13.2214634 274.036703,15.822439 274.036703,8.40780488 C274.036703,4.11512195 277.921906,2.13073171 281.832891,2.13073171 C284.028358,2.13073171 286.237708,2.74536585 287.887778,4.26536585 L285.136999,7.12195122 Z"
                                                id="Shape"></path>
                                            <path
                                                d="M307.882988,6.10146341 C307.888972,6.88939425 307.726817,7.66979051 307.407006,8.39219512 C306.447059,10.5528682 304.272448,11.9444132 301.875699,11.9317073 C301.068028,11.9361041 300.267621,11.7815277 299.521571,11.4770732 C298.804164,11.1882109 298.148751,10.7684788 297.589878,10.24 C297.038614,9.71365164 296.597907,9.08581127 296.292827,8.39219512 C295.973016,7.66979051 295.81086,6.88939425 295.816845,6.10146341 C295.811999,5.30986121 295.974072,4.52587269 296.292827,3.79902439 C296.597856,3.09791676 297.038359,2.46175306 297.589878,1.92585366 C298.147574,1.38954042 298.802876,0.961274642 299.521571,0.663414634 C300.265448,0.350491863 301.066688,0.191105893 301.875699,0.195121951 C302.680293,0.190410532 303.477143,0.349863487 304.215943,0.663414634 C305.652286,1.26116936 306.79547,2.38588493 307.403039,3.79902439 C307.723156,4.52558619 307.886582,5.30958592 307.882988,6.10146341 L307.882988,6.10146341 Z M306.931024,6.10146341 C306.935744,5.43122115 306.800748,4.76714288 306.534372,4.1502439 C306.276811,3.5532006 305.90746,3.00911727 305.445563,2.54634146 C304.988351,2.08732971 304.444763,1.72018812 303.845074,1.46536585 C303.222523,1.20234566 302.551216,1.06945586 301.873715,1.07512195 C301.192468,1.07047787 300.517486,1.20329352 299.890457,1.46536585 C298.664081,1.97894734 297.687475,2.93977712 297.16546,4.14634146 C296.899085,4.76324044 296.764088,5.42731871 296.768809,6.09756098 C296.765705,6.7594509 296.900707,7.41492503 297.16546,8.02341463 C297.42171,8.61892255 297.795113,9.15870467 298.264185,9.61170732 C298.733481,10.0646285 299.285157,10.4266915 299.890457,10.6790244 C300.517452,10.941203 301.192457,11.0740231 301.873715,11.0692683 C302.551221,11.0749912 303.22254,10.9420991 303.845074,10.6790244 C305.055841,10.1691863 306.018446,9.21723536 306.530406,8.02341463 C306.795989,7.41641514 306.932333,6.7623119 306.931024,6.10146341 L306.931024,6.10146341 Z M303.14895,9.35609756 L301.826117,6.85853659 L301.058596,6.85853659 L301.058596,9.35609756 L299.180451,9.35609756 L299.180451,2.58926829 L302.143439,2.58926829 C302.481341,2.58945875 302.818313,2.62411556 303.14895,2.69268293 C303.471297,2.75733432 303.779911,2.87614548 304.061249,3.04390244 C304.334177,3.20804166 304.561708,3.43591864 304.723657,3.70731707 C304.899771,4.01672617 304.986849,4.36750528 304.975531,4.72195122 C304.987069,5.14008324 304.851902,5.54937008 304.592762,5.88097561 C304.337922,6.20116709 303.99311,6.44067147 303.601133,6.5697561 L305.346401,9.35414634 L303.150934,9.35414634 L303.14895,9.35609756 Z M302.99029,4.74926829 C302.999084,4.53915012 302.878615,4.34443347 302.684868,4.25560976 C302.493987,4.15454079 302.280872,4.10095046 302.064108,4.0995122 L301.058596,4.0995122 L301.058596,5.50439024 L302.064108,5.50439024 C302.29803,5.50874844 302.526578,5.43517153 302.712634,5.29560976 C302.8913,5.16985705 302.995236,4.96534432 302.99029,4.74926829 L302.99029,4.74926829 Z"
                                                id="Shape"></path>
                                        </g>
                                        <g id="Group" transform="translate(407.000000, 50.000000)">
                                            <path
                                                d="M4.3388512,0.850843373 L2.69321663,0.850843373 L2.69321663,5.39927711 L1.64563457,5.39927711 L1.64563457,0.850843373 L0,0.850843373 L0,0 L4.33489059,0 L4.33489059,0.850843373 L4.3388512,0.850843373 Z M8.4262035,3.83277108 L9.88766958,0.00596385542 L11.3887418,0.00596385542 L11.3887418,5.40722892 L10.4104705,5.40722892 L10.4104705,1.17885542 L10.3847265,1.17885542 L8.77473742,5.39927711 L8.04400438,5.39927711 L6.43797593,1.17885542 L6.41223195,1.17885542 L6.41223195,5.39927711 L5.43396061,5.39927711 L5.43396061,0 L6.94889497,0 L8.4262035,3.83277108 Z"
                                                id="Shape"></path>
                                        </g>
                                    </g>
                                    <path
                                        d="M263.8125,116.25 C255.062456,104.166606 250.062506,89.1667563 248.8125,71.25 C248.187497,71.4583344 247.354172,71.5625 246.3125,71.5625 L246.3125,105.3125 L251.625,101.875 L255.6875,108.125 L239.75,118.125 L235.375,111.875 L238.8125,110 L238.8125,65 C249.854222,63.7499938 258.7083,62.5000062 265.375,61.25 L266.625,68.75 C263.499984,69.3750031 260.062519,69.8958313 256.3125,70.3125 C256.937503,74.8958562 257.562497,79.0624813 258.1875,82.8125 L265.0625,78.75 L268.8125,85.3125 L259.75,90.3125 C261.625009,97.1875344 265.166641,104.374963 270.375,111.875 L263.8125,116.25 Z M229.125,117.8125 L221.9375,114.6875 C224.645847,108.854137 226.416663,103.437525 227.25,98.4375 C228.083337,93.437475 228.5,86.4583781 228.5,77.5 L228.5,52.1875 C240.583394,51.1458281 252.979103,49.4791781 265.6875,47.1875 L266.9375,54.6875 C258.395791,56.1458406 248.083394,57.4999938 236,58.75 L236,77.5 C236,87.2917156 235.583337,94.7916406 234.75,100 C233.708328,105.416694 231.833347,111.354134 229.125,117.8125 Z M218.5,116.875 L211.3125,115 L217.25,87.5 L224.75,89.0625 L218.5,116.875 Z M220.6875,80.3125 L211,70.3125 L216.3125,65 L226,75 L220.6875,80.3125 Z M221.625,61.25 L212.5625,51.25 L218.1875,46.25 L227.25,55.9375 L221.625,61.25 Z M278.25,60.3125 L278.25,52.8125 L302.3125,52.8125 L302.3125,45.3125 L310.125,45.3125 L310.125,52.8125 L334.1875,52.8125 L334.1875,60.3125 L310.125,60.3125 L310.125,67.1875 L328.875,67.1875 L328.875,94.0625 L318.25,94.0625 L318.25,106.875 C318.25,107.916672 318.770828,108.4375 319.8125,108.4375 L326.0625,108.4375 C327.312506,108.4375 327.833334,107.916672 327.625,106.875 L327.625,99.0625 L335.4375,100.625 L335.4375,109.6875 C335.4375,113.854187 333.458353,115.833334 329.5,115.625 L317,115.625 C312.624978,115.625 310.4375,113.645853 310.4375,109.6875 L310.4375,94.0625 L301.6875,94.0625 C302.729172,102.812544 295.541744,110.833297 280.125,118.125 L276.0625,111.5625 C288.770897,105.520803 294.708337,99.6875281 293.875,94.0625 L283.5625,94.0625 L283.5625,67.1875 L302.3125,67.1875 L302.3125,60.3125 L278.25,60.3125 Z M291.375,86.5625 L321.0625,86.5625 L321.0625,74.6875 L291.375,74.6875 L291.375,86.5625 Z M357.0625,118.125 L349.5625,118.125 L349.5625,90.9375 C348.729163,92.1875062 347.791672,93.4374938 346.75,94.6875 L340.8125,89.6875 C346.229194,83.0208 350.708316,74.7917156 354.25,65 L361.4375,67.5 C359.979159,71.2500187 358.520841,74.6874844 357.0625,77.8125 L357.0625,118.125 Z M384.25,77.5 L384.25,70.3125 L402.6875,70.3125 L402.6875,77.5 L398,77.5 L398,110.625 C398.416669,115.416691 396.229191,117.604169 391.4375,117.1875 L386.75,117.1875 L384.5625,110 L388.3125,110 C389.979175,110 390.708334,109.479172 390.5,108.4375 L390.5,77.5 L384.25,77.5 Z M361.75,93.75 L361.75,86.5625 L368.3125,86.5625 L368.3125,80 L375.5,80 L375.5,86.5625 L382.0625,86.5625 L382.0625,93.75 L375.5,93.75 L375.5,102.8125 L383.625,101.875 L384.25,109.0625 L360.5,111.25 L359.5625,104.6875 L368.3125,103.75 L368.3125,93.75 L361.75,93.75 Z M362.0625,62.5 L362.0625,55.3125 L368.3125,55.3125 L368.3125,45.3125 L375.5,45.3125 L375.5,55.3125 L381.75,55.3125 L381.75,62.5 L375.5,62.5 L375.5,70.9375 L382.6875,70.9375 L382.6875,78.125 L361.125,78.125 L361.125,70.9375 L368.3125,70.9375 L368.3125,62.5 L362.0625,62.5 Z M348,69.375 L342.375,64.375 C346.958356,58.9583062 351.020816,52.5000375 354.5625,45 L361.4375,48.125 C357.687481,56.0417063 353.208359,63.1249687 348,69.375 Z M385.5,56.875 L385.5,49.6875 L401.4375,49.6875 L401.4375,56.875 L385.5,56.875 Z"
                                        id="派克街" fill="#000000"></path>
                                </g>
                            </g>
                        </svg>
                    </a>
                </div>
                <div id='progress'></div>
            </div>
        </header>

        <section id='content'>


            <header class='hero'>
                <span class="tag_ad">广告</span>
                <div class='cover parallax'
                     style='background-image: url("https://www.starbucks.com.cn/coffee-blog/images/pour-over-kv.jpg");'></div>
            </header>

            <section class='wrapper'>
                <header class='header'>
                    <h1>
                        手冲咖啡
                    </h1>
                    <p>
                        通过这种简单易操作的方式，享受到一杯醇厚浓郁的咖啡。
                    </p>
                    <section class='meta'>
                        <!-- <time datetime='2017-08-07 00:00:00 +0800'>

                          2017-08-07

                        </time> -->
                    </section>
                </header>
                <section class="breadcrumb">
                    <a href="/coffee-blog/" class="breadcrumb-link" id="blog-home-breadcrumb">首页</a>
                    <svg class="nav-search-button-glyph" width="13px" height="25px" viewBox="14 1 27 26" version="1.1">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                           sketch:type="MSPage">
                            <g id="Line-+-Line-+-Line-Copy" sketch:type="MSLayerGroup" stroke="#897A6C" stroke-width="3"
                               stroke-linecap="round">
                                <path stroke="#2f2f2f" class="nav-search-button-path" d="M15,1 L27,13" id="Line"
                                      sketch:type="MSShapeGroup"></path>
                                <path stroke="#2f2f2f" class="nav-search-button-path"
                                      d="M14.8878434,13.1064688 L26.8878434,25.1064688" id="Line-Copy"
                                      sketch:type="MSShapeGroup"
                                      transform="translate(20.887843, 19.106469) rotate(-90.000000) translate(-20.887843, -19.106469) "></path>
                            </g>
                        </g>
                    </svg>
                    <a href="/coffee-blog/categories/taste-and-drinks" class="breadcrumb-link"
                       id="blog-category-breadcrumb">咖啡品鉴</a>
                    <svg class="nav-search-button-glyph" width="13px" height="25px" viewBox="14 1 27 26" version="1.1">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                           sketch:type="MSPage">
                            <g id="Line-+-Line-+-Line-Copy" sketch:type="MSLayerGroup" stroke="#897A6C" stroke-width="3"
                               stroke-linecap="round">
                                <path stroke="#2f2f2f" class="nav-search-button-path" d="M15,1 L27,13" id="Line"
                                      sketch:type="MSShapeGroup"></path>
                                <path stroke="#2f2f2f" class="nav-search-button-path"
                                      d="M14.8878434,13.1064688 L26.8878434,25.1064688" id="Line-Copy"
                                      sketch:type="MSShapeGroup"
                                      transform="translate(20.887843, 19.106469) rotate(-90.000000) translate(-20.887843, -19.106469) "></path>
                            </g>
                        </g>
                    </svg>
                    <span class="breadcrumb-span">手冲咖啡</span>
                </section>
                <section class='body'>

                    <p>冲泡指南：</p>

                    <p><img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-1.jpg" alt=""/></p>

                    <h2 id="1-准备沸水">1. 准备沸水</h2>

                    <p>事先预估即将使用到的水并煮沸，其中包括冲洗器具的用量。</p>

                    <p><img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-2.jpg" alt=""/></p>

                    <h2 id="2-湿滤纸">2. 湿滤纸</h2>

                    <p>将热水均匀的冲在滤纸上，使滤纸全部湿润，紧紧贴附在滤杯上，然后倒掉分享壶内的热水。这一步将还原咖啡纯粹的味道。</p>

                    <p><img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-3.jpg" alt=""/></p>

                    <h2 id="3-准备咖啡粉">3. 准备咖啡粉</h2>

                    <p>下一步，准备好适量的咖啡粉。将磨好的咖啡粉倒入滤杯中，轻轻拍平。通常研磨精细的咖啡粉看起来很像砂糖的质地。请准备每2勺新鲜研磨咖啡粉配合6盎司热水。</p>

                    <p><img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-4.jpg" alt=""/></p>

                    <h2 id="4-冲泡与萃取">4. 冲泡与萃取</h2>

                    <p>将刚烧开的热水均匀浇注在咖啡粉上，当水量到达滤纸的一半时停止10秒，使咖啡粉充分吸水后膨胀。越新鲜的咖啡粉膨胀的越大，越能激发出咖啡的口感。</p>

                    <p><img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-5.jpg" alt=""/></p>

                    <h2 id="5-完成冲泡">5. 完成冲泡</h2>

                    <p>缓缓地倒入剩下的水，水流要保持稳定，可以顺着一个方向画同心圆进行注水，直至咖啡粉的外围。冲泡完成后请尽快享用。</p>

                    <h3 id="小贴士">小贴士</h3>
                    <p>建议手冲注水时可以使用计时器，一般一杯咖啡最佳冲泡时间是3分钟。</p>

                </section>
            </section>


            <footer class='footer'>
                <section class='wrapper'>
                    <h3>相关文章</h3>
                    <ul class='grid featured'>


                        <li class='card' id="blog-related-1">
                            <a href='/coffee-blog/the-4-fundamentals/'>
                                <div class='image'>
                                    <div class='blog-related-cover cover'
                                         style='background-image: url("https://www.starbucks.com.cn/coffee-blog/images/4-fundamentals-kv.jpg");'></div>
                                </div>
                                <div class='text'>
                                    <h3 class='blog-related-title'>咖啡调制</h3>
                                    <p class='blog-related-subtitle'>咖啡器并不是调制美味咖啡的唯一因素。咖啡调制的四要素分别是比例、研磨度、水、新鲜度。</p>
                                </div>
                                <small class='tag'><span class='label'>咖啡品鉴</span></small>
                            </a>

                        </li>

                        <li class='card' id="blog-related-2">
                            <a href='/coffee-blog/iced-pour-over/'>
                                <div class='image'>
                                    <div class='blog-related-cover cover'
                                         style='background-image: url("https://www.starbucks.com.cn/coffee-blog/images/iced-pour-over-kv.jpg");'></div>
                                </div>
                                <div class='text'>
                                    <h3 class='blog-related-title'>冰镇手冲咖啡</h3>
                                    <p class='blog-related-subtitle'>通过这种简单易操作的方式，能同时享受到冰咖啡的醇厚与浓郁。</p>
                                </div>
                                <small class='tag'><span class='label'>咖啡品鉴</span></small>
                            </a>

                        </li>

                        <li class='card' id="blog-related-3">
                            <a href='/coffee-blog/coffee-tasting/'>
                                <div class='image'>
                                    <div class='blog-related-cover cover'
                                         style='background-image: url("https://www.starbucks.com.cn/coffee-blog/images/coffee-tasting-kv.jpg");'></div>
                                </div>
                                <div class='text'>
                                    <h3 class='blog-related-title'>咖啡品尝</h3>
                                    <p class='blog-related-subtitle'>品尝是对照，比较和品味。</p>
                                </div>
                                <small class='tag'><span class='label'>咖啡品鉴</span></small>
                            </a>

                        </li>

                    </ul>
                </section>
            </footer>

        </section>

        <!-- 底部版权 -->
        <footer id='footer'>
            <div class='wrapper'>

                <ul class='links'>
                    <li class='organization' itemscope='' itemtype='#'><a href="/" id="website-footer-text"
                                                                          target='_blank'><span
                        itemprop='name'>星巴克官网</span></a></li>
                </ul>

                <ul class='legal'>
                    <li><a href="#" target='_blank'>隐私政策</a></li>
                    <li><a href="#" target='_blank'>条款和条件</a></li>
                </ul>

            </div>
        </footer>


        <!-- </article> -->
    </div>
</template>
<style scoped>
    @import '../../assets/css/article.css'
</style>
<script>
    import NavContainer from '@/components/navContainer'
    import NavOverlay from '@/components/NavOverlay'
    import NavMobile from '@/components/navMobile'
    import axios from 'axios'


    export default {
        name: 'menuFood',
        metaInfo: {
            title: '美食',
            titleTemplate: '%s | XPEL',
            meta: [
                {
                    name: 'keywords',
                    content: ''
                },
                {
                    name: 'description',
                    content: '探索星巴克美食。'
                }
            ]
        },
        data(){
            return {
                show_menu_bol: false,
                lgMedia: window.matchMedia('(min-width: 1025px)').matches,
                loading: false,
                foodSortItems: {},
                storage: null,
                curActive: 'all',
                menuNavFilter: [
                    {
                        menuEN: 'baking',
                        menuCN: '烘焙'
                    },
                    {
                        menuEN: 'dessert',
                        menuCN: '蛋糕&甜品'
                    },
                    {
                        menuEN: 'sandwich',
                        menuCN: '三明治、帕尼尼、卷'
                    },
                    {
                        menuEN: 'yogurt',
                        menuCN: '酸奶'
                    },
                    {
                        menuEN: 'other',
                        menuCN: '其他美食'
                    }
                ]
            }
        },
        mounted(){
            const _self = this;
            window.matchMedia('(min-width: 1025px)').addListener(() => {
                _self.lgMedia = window.matchMedia('(min-width: 1025px)').matches;
            });
            this.init();
            this.trackingVisitor();
        },
        components: {
            NavContainer: NavContainer,
            NavOverlay: NavOverlay,
            NavMobile: NavMobile
        },
        methods: {
            init(){
                this.storage = window.sessionStorage || null;
                let storage = this.storage;
                if (storage && storage.foodSortItems && storage.foodSortItems !== []) {
                    this.foodSortItems = this.getStorageItems({
                        storage: storage,
                        itemName: 'foodSortItems'
                    });
                } else {
                    this.getFoodItems();
                }
            },
            showMenuExec(){
                this.show_menu_bol = true;
            },
            closeMenuExec(){
                this.show_menu_bol = false;
            },
            pageRedir(item){
                this.$store.commit('pageRedir', item);
            },
            getFoodItems(){
                this.loading = true;

                axios.get("/food/items").then((res) => {
                    let data = res.data,
                        storage = this.storage;

                    if (data.status == '1') {
                        console.log("Data request failed!");
                        return;
                    }

                    this.foodSortItems = this.sortItems(data.result.data);
                    this.loading = false;

                    if (storage) {
                        this.setStorageItems({
                            storage: storage,
                            itemName: 'foodSortItems',
                            data: this.foodSortItems
                        });
                    }
                });
            },
            sortItems(productItems){
                let tempStr = '',
                    tempObj = {},
                    subTypes = [],
                    key = '', len = '';
                productItems.map((item) => {
                    if (item.SubTypes !== tempStr) {
                        tempStr = item.SubTypes;
                        subTypes.push(tempStr);
                        len = subTypes.length;
                        key = subTypes[len - 1];
                        tempObj[key] = [];
                    }
                    tempObj[key].push(item);
                });
                return tempObj;
            },
            setStorageItems(options){
                let storage = options.storage,
                    itemName = options.itemName,
                    json = options.data;
                storage.setItem(itemName, JSON.stringify(json));
            },
            getStorageItems(options){
                let storage = options.storage,
                    itemName = options.itemName,
                    json = storage.getItem(itemName);
                return JSON.parse(json);
            },
            getCurMenuList(index){
                let key = this.menuNavFilter[index].menuEN;
                let list = this.foodSortItems[key];
                if (list !== []) {
                    this.$store.curMenuList = list;
                    return true;
                } else {
                    return false;
                }
            },
            isNotLastItem(index){
                if (this.curActive == 'all') {
                    return index !== this.menuNavFilter.length - 1;
                } else {
                    return false;
                }
            },
            menuFilter(index){
                if (this.curActive == 'all') {
                    return true;
                } else {
                    return this.curActive == index;
                }
            },
            trackingVisitor() {
                let storage = window.sessionStorage || null;
                if (storage) {
                    let VisitorID = storage.getItem('VisitorID'),
                        page = '菜单-食品';
                    if (!VisitorID) return;
                    axios.post('users/tracking', {
                        visitorID: VisitorID,
                        page: page
                    })
                }

            }
        }
    }

</script>



